<template>
  <div class="table-container">
    <!-- 工单列表部分 -->
    <div class="work-order-section">
      <!-- 标题、搜索框和操作按钮区域 -->
      <div class="table-header">
        <h2 class="table-title">工单列表</h2>
        <div class="search-and-actions">
          <div class="search-container">
            <el-input
              v-model="searchProductionNo"
              placeholder="请输入生产单号搜索"
              clearable
              size="small"
              @keyup.enter="handleSearch"
            >
              <template #append>
                <el-button icon="el-icon-search" size="small" @click="handleSearch" />
              </template>
            </el-input>
          </div>
          
          <!-- 工单操作按钮 -->
          <div class="action-buttons">
            <el-button 
              type="primary" 
              size="small" 
              icon="el-icon-view"
              @click="handleBatchWorkOrderView"
              :disabled="selectedWorkOrders.length === 0"
            >
              查看
            </el-button>
            <el-button 
              type="success" 
              size="small" 
              icon="el-icon-edit"
              @click="openQualityEntryDialog"
              :disabled="selectedWorkOrders.length === 0"
            >
              质量信息录入
            </el-button>
          </div>
        </div>
      </div>
      
      <el-table 
        :data="pagedTableData" 
        border 
        :header-cell-style="headerCellStyle"
        :row-style="rowStyle"
        class="custom-table"
        max-height="350"
        v-loading="loading"
        ref="workOrderTable"
        @selection-change="handleWorkOrderSelectionChange"
        @row-click="handleWorkOrderRowClick"
        :row-class-name="workOrderRowClassName"
      >
        <!-- 点选框列 -->
        <el-table-column
          type="selection"
          width="55"
          align="center"
        />
        
        <el-table-column
          prop="planOrderNo"
          label="计划单号"
          align="center"
        />
        <el-table-column
          prop="productionOrderNo"
          label="生产单号"
          align="center"
        />
        <el-table-column
          prop="feedingBatch"
          label="投料批次"
          align="center"
        />
        <el-table-column
          prop="performance"
          label="性能"
          align="center"
          width="100"
        />
        <el-table-column
          prop="coating"
          label="镀层"
          align="center"
          width="80"
        />
        <el-table-column
          prop="productModel"
          label="产品型号"
          align="center"
          min-width="150"
        />
        <el-table-column
          prop="issueWeight"
          label="发料重量"
          align="center"
        />
        <el-table-column
          prop="quantity"
          label="数量"
          align="center"
          min-width="50"
        />
        <el-table-column
          prop="product"
          label="产品"
          align="center"
          min-width="150"
        />
        <el-table-column
          prop="status"
          label="状态"
          align="center"
          min-width="60"
        />
        <el-table-column
          prop="qualityJudgment"
          label="质量判定"
          align="center"
        />
      </el-table>
      
      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          :prev-text="prevText"
          :next-text="nextText"
          :disabled="loading || total <= pageSize"
          class="pagination"
        />
      </div>
    </div>

    <!-- 质量信息部分 -->
    <div class="quality-info-section">
      <!-- 质量信息标题和操作按钮 -->
      <div class="table-header">
        <h2 class="table-title">
          质量信息
          <template v-if="currentWorkOrder">
            <span class="current-workorder">
              (当前工单: {{ currentWorkOrder.productionOrderNo }})
            </span>
          </template>
        </h2>
        <div class="action-buttons">
          <el-button 
            type="primary" 
            size="small" 
            icon="el-icon-view"
            @click="handleBatchQualityView"
            :disabled="selectedQualityItems.length === 0"
          >
            查看
          </el-button>
          <el-button 
            type="success" 
            size="small" 
            icon="el-icon-edit"
            @click="handleBatchQualityEdit"
            :disabled="selectedQualityItems.length === 0"
          >
            编辑
          </el-button>
          <el-button 
            type="danger" 
            size="small" 
            icon="el-icon-delete"
            @click="handleBatchQualityDelete"
            :disabled="selectedQualityItems.length === 0"
          >
            删除
          </el-button>
        </div>
      </div>
      
      <el-table 
        :data="filteredQualityData" 
        border 
        :header-cell-style="headerCellStyle"
        :row-style="rowStyle"
        class="custom-table"
        max-height="350"
        v-loading="qualityLoading"
        ref="qualityTable"
        @selection-change="handleQualitySelectionChange"
        @row-click="handleQualityRowClick"
        :row-class-name="qualityRowClassName"
      >
        <!-- 点选框列 -->
        <el-table-column
          type="selection"
          width="55"
          align="center"
        />
        
        <el-table-column
          prop="productionOrderNo"
          label="生产单号"
          align="center"
          min-width="120"
        />
        <el-table-column
          prop="feedingBatch"
          label="投料批次"
          align="center"
          min-width="120"
        />
        <el-table-column
          prop="productCode"
          label="产品代码"
          align="center"
          min-width="120"
        />
        <el-table-column
          prop="beforeChamferDate"
          label="倒角前日期"
          align="center"
          min-width="120"
        />
        <el-table-column
          prop="beforeChamferChecker"
          label="倒角前测量人"
          align="center"
          min-width="120"
        />
        <el-table-column
          prop="afterChamferDate"
          label="倒角后日期"
          align="center"
          min-width="120"
        />
        <el-table-column
          prop="afterChamferChecker"
          label="倒角后测量人"
          align="center"
          min-width="120"
        />
        <el-table-column
          prop="quantity"
          label="数量"
          align="center"
          width="80"
        />
        <el-table-column
          prop="remarks"
          label="备注"
          align="center"
          min-width="150"
        />
      </el-table>
      
      <!-- 质量信息分页组件 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleQualitySizeChange"
          @current-change="handleQualityCurrentChange"
          :current-page="qualityCurrentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="qualityPageSize"
          :total="filteredQualityData.length"
          layout="total, sizes, prev, pager, next, jumper"
          :prev-text="prevText"
          :next-text="nextText"
          :disabled="qualityLoading || filteredQualityData.length <= qualityPageSize"
          class="pagination"
        />
      </div>
    </div>

    <!-- 质量信息录入对话框（同时用于编辑）  -->
    <el-dialog
      :title="isEditing ? '质量信息编辑' : '质量信息录入'"
      v-model="qualityEntryDialogVisible"  
      :width="dialogWidth"
      :modal="true"
      :close-on-click-modal="false"
      :before-close="handleDialogClose"
    >
      <!-- 使用key属性确保组件重新初始化 -->
      <SecondVue 
        :key="componentKey"   
        :selected-orders="selectedWorkOrders" 
        :edit-data="currentEditData"
        @save="handleQualityDataSave" 
        @cancel="qualityEntryDialogVisible = false"
      />
    </el-dialog>
  </div>
</template>

<script>
import SecondVue from './second.vue'; // 导入second组件

export default {
  name: 'WorkOrderTable',
  components: {
    SecondVue // 注册second组件
  },
  data() {
    return {
      // 新增：组件key，用于强制重新初始化
      componentKey: 0,
      // 工单列表数据
      tableData: [
        {
          planOrderNo: 'F250030-SP',
          productionOrderNo: 'DPD0010',
          feedingBatch: 'JAD0895A',
          performance: 'N38UH',
          coating: '磷化',
          feedingBatchAgain: 'DPD0010',
          productModel: 'R12.0*R24.3*29.5H',
          issueWeight: 11.318,
          quantity: 1210,
          product: 'N033BZ066S/白片',
          status: '完成',
          qualityJudgment: '通过主要检测',
          productCode: 'N033BZ066S' // 产品代码用于关联
        },
        {
          planOrderNo: 'F250030-SP',
          productionOrderNo: 'DPD0009',
          feedingBatch: '',
          performance: 'N38UH',
          coating: '磷化',
          feedingBatchAgain: 'DPD0009',
          productModel: 'R12.0*R24.3*29.5H-Long',
          issueWeight: 0,
          quantity: 1,
          product: 'N033BZ066S/白片升级版',
          status: '已取消',
          qualityJudgment: '待判定',
          productCode: 'N033BZ066S' // 产品代码用于关联
        },
        {
          planOrderNo: 'F250031-SP',
          productionOrderNo: 'DPD0011',
          feedingBatch: 'JAD0896B',
          performance: 'N40',
          coating: '镀锌',
          feedingBatchAgain: 'DPD0011',
          productModel: 'R10.0*R20.0*25.0H',
          issueWeight: 8.752,
          quantity: 850,
          product: 'N034BZ077S/黑片',
          status: '进行中',
          qualityJudgment: '待检测',
          productCode: 'N034BZ077S' // 产品代码用于关联
        },
        {
          planOrderNo: 'F250032-SP',
          productionOrderNo: 'DPD0012',
          feedingBatch: 'JAD0897C',
          performance: 'N42',
          coating: '镀铬',
          feedingBatchAgain: 'DPD0012',
          productModel: 'R15.0*R30.0*30.0H',
          issueWeight: 15.236,
          quantity: 620,
          product: 'N035BZ088S/黄片',
          status: '未开始',
          qualityJudgment: '未检测',
          productCode: 'N035BZ088S' // 产品代码用于关联
        },
        { 
          planOrderNo: 'F250033-SP', 
          productionOrderNo: 'DPD0013', 
          feedingBatch: 'JAD0898D', 
          performance: 'N35', 
          coating: '磷化', 
          feedingBatchAgain: 'DPD0013', 
          productModel: 'R8.0*R18.0*22.0H', 
          issueWeight: 5.621, 
          quantity: 980, 
          product: 'N036BZ099S/蓝片', 
          status: '进行中', 
          qualityJudgment: '检测中',
          productCode: 'N036BZ099S' // 产品代码用于关联
        },
        { 
          planOrderNo: 'F250034-SP', 
          productionOrderNo: 'DPD0014', 
          feedingBatch: 'JAD0899E', 
          performance: 'N38', 
          coating: '镀锌', 
          feedingBatchAgain: 'DPD0014', 
          productModel: 'R20.0*R40.0*40.0H', 
          issueWeight: 22.874, 
          quantity: 450, 
          product: 'N037BZ100S/红片', 
          status: '完成', 
          qualityJudgment: '通过',
          productCode: 'N037BZ100S' // 产品代码用于关联
        },
        { 
          planOrderNo: 'F250035-SP', 
          productionOrderNo: 'DPD0015', 
          feedingBatch: 'JAD0900F', 
          performance: 'N45', 
          coating: '镀铬', 
          feedingBatchAgain: 'DPD0015', 
          productModel: 'R14.0*R28.0*28.0H', 
          issueWeight: 14.325, 
          quantity: 720, 
          product: 'N038BZ101S/绿片', 
          status: '未开始', 
          qualityJudgment: '未检测',
          productCode: 'N038BZ101S' // 产品代码用于关联
        }
      ],
      
      // 质量信息数据 - 更新结构，包含生产单号和投料批次
      qualityData: [
        {
          productionOrderNo: 'DPD0010',
          feedingBatch: 'JAD0895A',
          productCode: 'N033BZ066S',
          beforeChamferDate: '2023-05-01',
          beforeChamferChecker: '张三',
          afterChamferDate: '2023-05-02',
          afterChamferChecker: '李四',
          quantity: 1210,
          remarks: '符合标准'
        },
        {
          productionOrderNo: 'DPD0009',
          feedingBatch: '',
          productCode: 'N033BZ066S',
          beforeChamferDate: '2023-05-03',
          beforeChamferChecker: '王五',
          afterChamferDate: '2023-05-04',
          afterChamferChecker: '赵六',
          quantity: 1,
          remarks: '已取消，未检测'
        },
        {
          productionOrderNo: 'DPD0011',
          feedingBatch: 'JAD0896B',
          productCode: 'N034BZ077S',
          beforeChamferDate: '2023-05-05',
          beforeChamferChecker: '孙七',
          afterChamferDate: '2023-05-06',
          afterChamferChecker: '周八',
          quantity: 850,
          remarks: '检测中'
        },
        {
          productionOrderNo: 'DPD0012',
          feedingBatch: 'JAD0897C',
          productCode: 'N035BZ088S',
          beforeChamferDate: '',
          beforeChamferChecker: '',
          afterChamferDate: '',
          afterChamferChecker: '',
          quantity: 620,
          remarks: '未开始'
        }
      ],
      
      // 搜索相关
      searchProductionNo: '',
      
      // 工单列表分页相关
      total: 0,
      pageSize: 20,
      currentPage: 1,
      selectedWorkOrders: [], // 选中的工单
      currentWorkOrder: null, // 当前选中的工单，用于关联质量信息
      
      // 质量信息分页相关
      qualityPageSize: 20,
      qualityCurrentPage: 1,
      selectedQualityItems: [], // 选中的质量信息
      
      // 分页按钮文本
      prevText: '上一页',
      nextText: '下一页',
      
      // 加载状态
      loading: false,
      qualityLoading: false,
      
      // 对话框相关
      qualityEntryDialogVisible: false,
      dialogWidth: '80%',
      isEditing: false,        // 新增：标记是否为编辑状态
      currentEditData: null,   // 新增：当前编辑的数据
    }
  },
  mounted() {
    // 初始化数据
    this.initTableData();
    this.initQualityData();
  },
  computed: {
    // 表头样式
    headerCellStyle() {
      return {
        backgroundColor: '#f5f7fa',
        color: '#303133',
        fontWeight: 'bold',
        height: '30px',
        padding: '0'
      };
    },
    
    // 工单列表过滤后的数据
    filteredTableData() {
      if (!this.searchProductionNo) {
        return this.tableData;
      }
      return this.tableData.filter(item => 
        item.productionOrderNo.toLowerCase().includes(this.searchProductionNo.toLowerCase())
      );
    },
    
    // 工单列表分页后的数据
    pagedTableData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.filteredTableData.slice(startIndex, endIndex);
    },
    
    // 根据当前选中的工单过滤质量信息
    filteredQualityData() {
      // 如果没有选中工单，显示所有质量信息
      if (!this.currentWorkOrder) {
        return this.qualityData;
      }
      
      // 根据生产单号关联工单和质量信息
      return this.qualityData.filter(item => 
        item.productionOrderNo === this.currentWorkOrder.productionOrderNo
      );
    }
  },
  methods: {
    // 行样式
    rowStyle({ rowIndex }) {
      return {
        backgroundColor: rowIndex % 2 === 0 ? '#ffffff' : '#fafafa',
        height: '30px',
        padding: '0',
        cursor: 'pointer'
      };
    },
    
    // 工单列表行样式类（用于高亮选中行）
    workOrderRowClassName({ row }) {
      const isSelected = this.selectedWorkOrders.some(item => 
        item.productionOrderNo === row.productionOrderNo
      );
      return isSelected ? 'selected-row' : '';
    },
    
    // 质量信息行样式类（用于高亮选中行）
    qualityRowClassName({ row }) {
      const isSelected = this.selectedQualityItems.some(item => 
        item.productionOrderNo === row.productionOrderNo && 
        item.feedingBatch === row.feedingBatch
      );
      return isSelected ? 'selected-row' : '';
    },
    
    // 初始化工单列表数据
    initTableData() {
      this.loading = true;
      setTimeout(() => {
        this.total = this.tableData.length;
        console.log('工单列表数据初始化完成，总条数: ', this.total);
        this.loading = false;
      }, 500);
    },
    
    // 初始化质量信息数据
    initQualityData() {
      this.qualityLoading = true;
      setTimeout(() => {
        console.log('质量信息数据初始化完成，总条数: ', this.qualityData.length);
        this.qualityLoading = false;
      }, 500);
    },
    
    // 工单列表搜索处理
    handleSearch() {
      this.currentPage = 1;
      this.loading = true;
      setTimeout(() => {
        this.total = this.filteredTableData.length;
        this.loading = false;
      }, 500);
    },
    
    // 工单列表分页大小改变
    handleSizeChange(val) {
      const currentPosition = (this.currentPage - 1) * this.pageSize;
      this.pageSize = val;
      this.currentPage = Math.floor(currentPosition / this.pageSize) + 1;
      this.loadTableData();
    },
    
    // 工单列表页码改变
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadTableData();
    },
    
    // 加载工单列表数据
    loadTableData() {
      this.loading = true;
      setTimeout(() => {
        console.log(`加载工单列表第${this.currentPage}页，每页${this.pageSize}条数据`);
        this.loading = false;
      }, 300);
    },
    
    // 质量信息分页大小改变
    handleQualitySizeChange(val) {
      const currentPosition = (this.qualityCurrentPage - 1) * this.qualityPageSize;
      this.qualityPageSize = val;
      this.qualityCurrentPage = Math.floor(currentPosition / this.qualityPageSize) + 1;
      this.loadQualityData();
    },
    
    // 质量信息页码改变
    handleQualityCurrentChange(val) {
      this.qualityCurrentPage = val;
      this.loadQualityData();
    },
    
    // 加载质量信息数据
    loadQualityData() {
      this.qualityLoading = true;
      setTimeout(() => {
        console.log(`加载质量信息第${this.qualityCurrentPage}页，每页${this.qualityPageSize}条数据`);
        this.qualityLoading = false;
      }, 300);
    },
    
    // 工单选择变化
    handleWorkOrderSelectionChange(selection) {
      // 限制只能选择一行
      if (selection.length > 1) {
        // 保留最后选中的行
        const lastSelected = selection.pop();
        this.$refs.workOrderTable.clearSelection();
        this.$refs.workOrderTable.toggleRowSelection(lastSelected, true);
        this.selectedWorkOrders = [lastSelected];
        this.currentWorkOrder = lastSelected; // 更新当前工单
      } else {
        this.selectedWorkOrders = selection;
        this.currentWorkOrder = selection.length > 0 ? selection[0] : null; // 更新当前工单
      }
      console.log('选中的工单:', this.selectedWorkOrders);
    },
    
    // 质量信息选择变化 - 不限制选择数量，支持多选
    handleQualitySelectionChange(selection) {
      this.selectedQualityItems = selection;
      console.log('选中的质量信息:', this.selectedQualityItems);
    },
    
    // 工单列表行点击事件 - 只能选中一行，并更新质量信息
    handleWorkOrderRowClick(row, column, event) {
      if (column.type === 'selection') return;
      
      const workOrderTable = this.$refs.workOrderTable;
      const isSelected = this.selectedWorkOrders.some(item => 
        item.productionOrderNo === row.productionOrderNo
      );
      
      // 清除所有选中状态
      workOrderTable.clearSelection();
      
      // 如果未选中，则选中当前行；如果已选中，则保持未选中状态
      if (!isSelected) {
        workOrderTable.toggleRowSelection(row, true);
        this.currentWorkOrder = row; // 设置当前工单
      } else {
        this.currentWorkOrder = null; // 取消选中时清空当前工单
      }
      
      // 重置质量信息分页
      this.qualityCurrentPage = 1;
    },
    
    // 质量信息列表行点击事件 - 只能选中一行
    handleQualityRowClick(row, column, event) {
      // 点击选择框列不执行此逻辑，保留原生多选功能
      if (column.type === 'selection') return;
      
      const qualityTable = this.$refs.qualityTable;
      const isSelected = this.selectedQualityItems.some(item => 
        item.productionOrderNo === row.productionOrderNo && 
        item.feedingBatch === row.feedingBatch
      );
      
      // 清除所有选中状态
      qualityTable.clearSelection();
      
      // 如果未选中，则选中当前行；如果已选中，则保持未选中状态
      if (!isSelected) {
        qualityTable.toggleRowSelection(row, true);
      }
    },
    
    // 打开质量信息录入对话框
    openQualityEntryDialog() {
      if (this.selectedWorkOrders.length === 0) {
        this.$message.warning('请先选择要录入质量信息的工单');
        return;
      }
      
      // 强制组件重新初始化
      this.componentKey += 1;
      this.isEditing = false;
      this.currentEditData = null;
      this.qualityEntryDialogVisible = true;
    },
    
    // 处理对话框关闭
    // 处理对话框关闭 - 修改此方法
    handleDialogClose(done) {
      this.$confirm('确定要取消吗？未保存的数据将会丢失。')
        .then(_ => {
          done();
          // 重置状态
          this.isEditing = false;
          this.currentEditData = null;
          // 强制组件重新初始化（下次打开时）
          this.componentKey += 1;
        })
        .catch(_ => {});
    },
    
    // 处理质量信息保存 - 自动填入关联的工单信息
    handleQualityDataSave(data) {
      console.log('保存质量信息:', data);
      
      if (this.isEditing) {
        // 编辑模式：更新现有数据
        const index = this.qualityData.findIndex(
          item => item.productionOrderNo === this.currentEditData.productionOrderNo &&
                 item.feedingBatch === this.currentEditData.feedingBatch
        );
        if (index !== -1) {
          // 合并原有数据和新数据
          this.qualityData.splice(index, 1, {
            ...this.currentEditData,
            ...data
          });
          this.$message.success('质量信息更新成功');
        }
      } else {
        // 新增模式：创建新记录
        const selectedOrder = this.selectedWorkOrders[0];
        const newQualityItem = {
          // 基础信息
          productionOrderNo: selectedOrder.productionOrderNo,
          feedingBatch: selectedOrder.feedingBatch,
          productCode: selectedOrder.productCode,
          // 表格数据
          table1: data.table1,
          merged1: data.merged1,
          table2: data.table2,
          merged2: data.merged2,
          table3: data.table3,
          merged3: data.merged3,
          // 其他信息
          beforeChamferDate: new Date().toISOString().split('T')[0],
          beforeChamferChecker: '当前用户', // 实际应用中应替换为真实用户名
          afterChamferDate: new Date().toISOString().split('T')[0],
          afterChamferChecker: '当前用户',
          quantity: selectedOrder.quantity,
          remarks: '自动保存'
        };
        
        this.qualityData.push(newQualityItem);
        this.$message.success('质量信息录入成功');
      }
      
      // 关闭对话框
      this.qualityEntryDialogVisible = false;
    },
    
    // 批量查看工单
    handleBatchWorkOrderView() {
      if (this.selectedWorkOrders.length === 0) {
        this.$message.warning('请先选择要查看的工单');
        return;
      }
      console.log('批量查看工单:', this.selectedWorkOrders);
    },
    
    // 批量查看质量信息
    handleBatchQualityView() {
      if (this.selectedQualityItems.length === 0) {
        this.$message.warning('请先选择要查看的质量信息');
        return;
      }
      console.log('批量查看质量信息:', this.selectedQualityItems);
    },
    
    // 批量编辑质量信息
    handleBatchQualityEdit() {
      if (this.selectedQualityItems.length === 0) {
        this.$message.warning('请先选择要编辑的质量信息');
        return;
      }
      
      // 限制只能编辑一条质量信息
      if (this.selectedQualityItems.length > 1) {
        this.$message.warning('只能选择一条质量信息进行编辑');
        return;
      }
      
      // 强制组件重新初始化
      this.componentKey += 1;
      
      // 设置编辑状态和数据
      this.isEditing = true;
      this.currentEditData = this.selectedQualityItems[0];
      
      // 查找对应的工单信息作为选中工单
      const relatedOrder = this.tableData.find(
        item => item.productionOrderNo === this.currentEditData.productionOrderNo
      );
      
      if (relatedOrder) {
        this.selectedWorkOrders = [relatedOrder];
      }
      
      // 打开对话框
      this.qualityEntryDialogVisible = true;
    },
    
    // 批量删除质量信息
    handleBatchQualityDelete() {
      if (this.selectedQualityItems.length === 0) {
        this.$message.warning('请先选择要删除的质量信息');
        return;
      }
      // 确认删除
      this.$confirm('确定要删除选中的质量信息吗？', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 执行删除操作
        this.qualityData = this.qualityData.filter(item => 
          !this.selectedQualityItems.some(selected => 
            selected.productionOrderNo === item.productionOrderNo && 
            selected.feedingBatch === item.feedingBatch
          )
        );
        this.$refs.qualityTable.clearSelection();
        this.$message.success('删除成功');
      }).catch(() => {
        // 取消删除
        this.$message.info('已取消删除');
      });
    }
  }
};
</script>

<style scoped>
.table-container {
  padding: 15px;
  margin: 15px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(220, 12, 12, 0.05);
}

/* 两个表格区域的分隔 */
.work-order-section {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #0d2ed0;
}

.quality-info-section {
  margin-top: 5px;
}

/* 标题和搜索框区域 */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

.search-and-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 标题样式 */
.table-title {
  margin: 0 0 20px 0;
  color: #cc1124;
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 10px;
  width: auto;
}

/* 当前工单提示样式 */
.current-workorder {
  font-size: 14px;
  color: #666;
  margin-left: 10px;
  font-weight: normal;
}

/* 搜索框样式 */
.search-container {
  width: 300px;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 10px;
}

.custom-table {
  width: 100%;
  overflow: auto;
  margin-bottom: 15px;
}

/* 表格单元格样式 */
::v-deep .el-table th,
::v-deep .el-table td {
  padding: 0 5px;
  white-space: nowrap;
  text-overflow: clip;
  overflow: visible;
}

/* 选中行高亮样式 */
::v-deep .el-table .selected-row {
  background-color: #e6f7ff !important;
}

/* 行悬停样式增强 */
::v-deep .el-table__row:hover {
  background-color: #f0f7ff !important;
}

/* 分页容器 */
.pagination-container {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}

.pagination {
  text-align: right;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .table-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .search-and-actions {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .search-container {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .action-buttons {
    width: 100%;
    justify-content: flex-start;
  }
  
  .dialog-width {
    width: 95% !important;
  }
}
</style>